<template>
<section class="screen" ref="sectionRef" v-bind="setSectionRef">
    <div class="screenIn">
        <div class="screen_container">
            <IndexTop></IndexTop>
            <div class="screen_box">
                <ul class="left_nav">
                    <li 
                        v-for="(item,index) in navList" 
                        :key="index" 
                        >
                        <router-link 
                            :to="item.path" 
                            :class="{'active':navIndex === index}" 
                            >
                                {{item.title}}
                        </router-link>
                    </li>
                </ul>
                <div class="ai_text">
                    妙音AI
                    <span v-if="userState.betaVersion">(内测版)</span>
                </div>
            </div>
            <div class="tips">
                <p>滚动浏览</p>
                <img src="../../images/arrow_down.png" alt="">
            </div>
        </div>
        <PopupModal></PopupModal>
    </div>
</section>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useUserStore } from '../../store/user';
import IndexTop from '../../components/indexTop.vue'
const { userState } = useUserStore()
const props = defineProps({
  setSectionRef: {
    type: Function,
    required: true
  }
});

let isShowLoginBtn = ref(true) // 是否显示登录按钮
const sectionRef = ref(null);


function getQueryParams() {
    const params = {};
    const queryString = window.location.href.split('?')[1]
    const pairs = queryString.split("&");
    for (let pair of pairs) {
        const [key, value] = pair.split("=");
        params[key] = decodeURIComponent(value || "");
    }
    return params;
}

onMounted(() => {
    props.setSectionRef(sectionRef.value); // 将分屏 ref 传递给父组件
    // console.log('分屏 1 渲染:', sectionRef.value);
    userState.isShowLogin = false
    if ( userState.token ) {
        isShowLoginBtn.value = false
    }


    // 未绑定走这里
    // if (window.location.href.includes('?')) {
    //     const { uuid } = getQueryParams();
    //     console.log('uuid:', uuid)
    //     if (uuid) {
    //         userState.uuid = uuid
    //         userState.isShowLogin = true
    //         userState.pageIndex = 3  // 显示绑定弹窗
    //     }
    // }
    
});

let navIndex = ref(0)
const navList = reactive([
    { title: '首页', path: '/' },
    { title: 'AI作曲', path: '/aimusic' },
    { title: '我的创作', path: '/myworks' },
    { title: 'AI模型库', path: '/aimodel' },
    { title: '商城', path: '/shop' }
])

</script>

<style scoped>

.screen_box {
    width: 100%;
    height: calc(100vh - 8.0rem);
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.left_nav {
    width: 18.0rem;
    height: 40.0rem;
    margin-top: -10rem;
    /* margin-left: 4.0rem; */
    /* background-color: brown; */
}

.left_nav li {
    width: 100%;
    font-size: 3.6rem;
    padding: 1.0rem 0;
    box-sizing: border-box;
    /* background-color: blueviolet; */
    margin-bottom: .1rem;
    
}

.left_nav li a {
    height: 5.0rem;
    line-height: 5.0rem;
    padding:.5rem 1.0rem;
    /* background-color: aquamarine; */
    color: #fff;
    display: block;
    position: relative;
    border-radius: 1.0rem;
    display: block;
    transition: all .5s;
}

.left_nav li .active {
    background-color: rgba(17, 99, 143, 0.43);
}

.left_nav li a:hover{
    background-color: rgba(17, 99, 143, 0.43);
}

.ai_text {
    width: 70.0rem;
    height: 40.0rem;
    font-size: 20rem;
    font-weight: 300;
    /* background-color: aquamarine; */
    margin: auto;
}

.ai_text span {
    font-size: 18px;
    margin-left: -3rem;
}

.tips {
    width: 100%;
    position: absolute;
    left: 0;
    font-size: 1.6rem;
    bottom: 4.0rem;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.tips img {
    margin-left: 1.0rem;
    width: 1.6rem;
    height: 1.6rem;
}



</style>
  